<%--
  Created by IntelliJ IDEA.
  User: HP
  Date: 2021/5/19
  Time: 12:59
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>显示图片</title>
    <script src="<%=request.getContextPath()%>/js/jQuery.js"></script>
</head>
<style type="text/css">
    body,
    ul,
    li {
        padding: 0;
        margin: 0
    }

    ul,
    li {
        list-style: none
    }

    /* 调下一张图片按钮的位置 */
    .img-scroll {
        position: relative;
        margin: 20px auto;
        width: 740px;
    }

    /* 调上下按钮的大小 */
    .img-scroll .prev,
    .img-scroll .next {
        position: absolute;
        display: block;
        width: 50px;
        height: 100px;
        background-color: #000;
        top: 0;
        color: #FFF;
        text-align: center;
        line-height: 100px
    }

    .img-scroll .prev {
        left: 0;
        cursor: pointer;
    }

    .img-scroll .next {
        right: 0;
        cursor: pointer;
    }

    /* 中间三张图片占用的宽度 */
    .img-list {
        position: relative;
        width: 620px;
        height: 200px;
        margin-left: 60px;
        overflow: hidden
    }

    /* 存放循环图片的宽度*/
    .img-list ul {
        width: 9999px;
    }

    /* 设置每个图片外层宽高为多少 */
    .img-list li {
        float: left;
        display: inline;
        width: 200px;
        margin-right: 10px;
        height: 200px;
        background-color: #BDBDDF;
        text-align: center;
        line-height: 100px;
    }

    /* 规定图片宽高 */
    img {
        height: 200px;
        width: 200px;
    }

    #img li {
        position: relative;
        display: inline-block;
    }

    /*两个文字的标签给了宽高，如果文字多，就给宽一点*/

    .text1 {
        color: rgb(19, 160, 255);
        position: absolute;
        width: 50px;
        height: 50px;
        z-indent: 2;
        left: 0;
        top: 20px;
        cursor: pointer;
    }

    .text2 {
        color: red;
        position: absolute;
        width: 50px;
        height: 50px;
        z-indent: 2;
        left: 50%;
        top: 50px;
        cursor: pointer
    }
</style>
<body>
<!-- <div style="position:absolute;width: 1200px; height:400px; overflow:auto;"> -->
<div id="xianshi">

</div>
<div class="img-scroll">
    <!-- 上下按鈕 -->
    <span class="prev"><</span>

    <span class="next"> > </span>

    <div class="img-list">

        <ul id="img">
            <!-- 更换图片地址可以换图 -->
            <!-- 可以ajax返回数据直接放到这里，其实也可以声明一个数组专门放路径 -->
            <%--            <li>--%>
            <%--                <img src="asstes/images/杀手鱼香鸡丝.jpg" onclick="img()">--%>
            <%--                <div onclick="aa()"--%>
            <%--                     style="color:rgb(19, 160, 255);position:absolute;width:50px;height:50px;z-indent:2;left:0;top: 20px;cursor: pointer;;">--%>
            <%--                    文字1--%>
            <%--                </div>--%>
            <%--                <div onclick="bb()"--%>
            <%--                     style="color:red;position:absolute;width:50px;height:50px;z-indent:2;left:50%;top: 50px;cursor: pointer;;">--%>
            <%--                    文字2--%>
            <%--                </div>--%>
            <%--            </li>--%>

        </ul>

    </div>
</div>

</body>
<%--控制轮播的js方法--%>
<script type="text/javascript">

    function DY_scroll(wraper, prev, next, img, speed, or) {

        var wraper = $(wraper);

        var prev = $(prev);

        var next = $(next);

        var img = $(img).find('ul');

        var w = img.find('li').outerWidth(true);

        var s = speed;

        next.click(function () {

            img.animate({'margin-left': -w}, function () {

                img.find('li').eq(0).appendTo(img);

                img.css({'margin-left': 0});

            });

        });

        prev.click(function () {

            img.find('li:last').prependTo(img);

            img.css({'margin-left': -w});

            img.animate({'margin-left': 0});

        });

        if (or == true) {
            // 换图时间1s
            ad = setInterval(function () {
                next.click();
            }, s * 500);

            wraper.hover(function () {
                clearInterval(ad);
            }, function () {
                ad = setInterval(function () {
                    next.click();
                }, s * 500);
            });
        }

    }

    // true为自动播放，不加此参数或false就默认不自动
    DY_scroll('.img-scroll', '.prev', '.next', '.img-list', 3, false);

</script>

</body>
<script>
    // 连ajax接口接收数据的方法
    function cata() {
        //创建表头
        $.ajax({
            url: '<%=request.getContextPath() %>/ajax',
            success: function (re) {
                // console.log('res', re);
                // for循环渲染数据到页面
                for (var i = 0; i < 10; i++) {
                    $('#img').append(`
                    <li ">
                <img src="${re[i].IMAGE}" onclick="cata1(${re[i].ID})">
                <div class="text1" onclick="aa()">
                    ${re[i].MENU_NAME}${re[i].MENU_AUTHOR}
                </div>
                <div class="text2" onclick="bb()"
                     >
                    ${re[i].MENU_AUTHOR}
                </div>
            </li>`
                    )
                }
            }
        })
    };
    // 立即创建方法
    cata();
    // 接收上面传递的一个id参数；拿到id就可以做修改和删除功能了；如果是做详情页传参也可以和上面的ajax写在一起（思路想好才行）
    <%--function img(id) {--%>
    <%--    alert("詳情和"+id);--%>
    <%--    location.href='<%=request.getContextPath() %>/img?id='+id;--%>
    <%--}--%>
    // 接收一个id，查询菜品具体信息
    function out(id) {
        $.ajax({
            url:'<%= request.getContextPath()%>/token?id='+id,

            success :function (res) {
                console.log(res[i].TOKEN);
            }

        })
    }
    out();
    function cata1(id) {
        alert(id);
        //创建表头
        $.ajax({
            url: '<%=request.getContextPath() %>/img?id=' + id,
            success: function (res) {
                console.log('resselect', res);
                // for循环渲染数据到页面
                for (var i = 0; i < res.length; i++) {
                    $('#xianshi').html(`
                    <li ">
                <img src="${res[i].IMAGE}" onclick="img(${res[i].ID})">
                <div class="text1" onclick="aa()">
                    ${res[i].MENU_NAME}
                </div>
                <div class="text2" onclick="bb()"
                     >
                    ${res[i].MENU_AUTHOR}
                </div>
            </li>`
                    )
                }
            }
        })
    };

    //弹出层
    <%--function box(ckou) {--%>
    <%--    if ($('#dianji_a').get(0) != null) {--%>
    <%--        $('#dianji_a').show();--%>
    <%--    } else {--%>
    <%--        $('#body').append(' <div class="mengban" id="dianji_a"> </div>');--%>
    <%--    }--%>
    <%--    $('#dianji_a').html(`--%>
    <%--         <div class="tangchu">--%>
    <%--         <div class="tangchu_t">--%>
    <%--         ${ckou.title || '标题'}--%>
    <%--         </div>--%>
    <%--         <div class="tangchu_c">--%>
    <%--         <form action=${ckou.action || ''}>--%>
    <%--         ${ckou.text || ''}--%>
    <%--          <button  type="submit" >${ckou.buttom || '保存'}</button>--%>
    <%--           <button type="button" onclick="$('#table_a').show();$('#dianji_a').hide();">取消</button>--%>
    <%--           </form>--%>
    <%--          </div>--%>
    <%--          </div>--%>
    <%--     `)--%>
    <%--};--%>

    <%--let updatebox = {--%>
    <%--    title: '修改页面',--%>
    <%--    buttom: '保存修改',--%>
    <%--    action: '<%=request.getContextPath() %>/UpdateStudent',--%>
    <%--    text: ` <span>学号:</span><input type="text" placeholder="请输入学号" id="updatetid" name="q1" readonly><br>--%>
    <%--           <span>名字:</span><input type="text" placeholder="请输入名字" id="updatename" name="q2" required="required"><br>--%>
    <%--           <span>班级:</span><input type="text" placeholder="请输入班级" id="updateclass" name="q4" required="required"><br>--%>
    <%--            <span>性别:</span> <select id="updatesex" name="q3" style="width: 205px;height: 32px;margin-top: 20px">--%>
    <%--                <option value="男">男</option>--%>
    <%--                <option value="女">女</option>--%>
    <%--                </select>--%>
    <%--            <input type="hidden"  id="updatestate" name="q5" readonly><br>--%>
    <%--            <input type="hidden"  id="id" name="q6"><br>`--%>
    <%--};--%>

    <%--function update(index) {--%>
    <%--    box(updatebox);--%>
    <%--    $("#id").val(re[index].student_id)--%>
    <%--    $("#updatetid").val(currentList[index].student_number_id),--%>
    <%--        $("#updatename").val(currentList[index].student_name),--%>
    <%--        $("#updatesex").val(currentList[index].student_sex),--%>
    <%--        $("#updateclass").val(currentList[index].student_class),--%>
    <%--        $("#updatestate").val(currentList[index].state)--%>
    <%--};--%>

    function aa() {
        alert("1");
    }

    function bb() {
        alert("2");
    }
</script>
</html>
